<%@ page contentType="text/html; charset=utf-8" %>

<%@ include file="/WEB-INF/jsp/includeTop.jsp" %>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<!-- <font class="globalText"><b>计划巡店路径: </b></font><br/> -->
<div id="mapContainer" style="height: 80%;">Loading...</div>
<!-- <p/> -->
<!-- <font class="globalText"><b>实际巡店路径: </b></font><br/> -->
<!-- <div id="mapContainer1" style="height: 80%;">Loading...</div> -->
<!-- <p/> -->

<table width="100%" border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td valign="top">
      <table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="bottom" class="blueTableBg">&nbsp;
          	<c:if test="${!empty executorName}">
          		${executorName}&nbsp;-&nbsp;
          	</c:if>
         	 巡店执行跟踪&nbsp;-&nbsp;${standardAdminDivAreaName}</td>
        </tr>
        <tr>
          <td valign="bottom" >
<%--           	<input type="text" id="searchStartTime" value="${dtStart}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'searchEndTime\')}'})" /> --%>
          	
<%--           	<input type="text" id="searchEndTime" value="${dtEnd}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'searchStartTime\')}'})" /> --%>

          		<input type="text" id="searchStartTime" value="${dtStart}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'${nowDate}'})" />
          		
          	<input onclick="javascript:searchExecutor();" type="button" class=" btnStyle" value="查询" />
          </td>
        </tr>
       
         
<%-- 		<%@ include file="/WEB-INF/jsp/project/projectSearch.jsp" %>         --%>
        <tr>
          <td>
            <table width="100%" border="0" cellpadding="0" cellspacing="5">
              <tr>
                <td>
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td class="dashTopLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashTop" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashTopRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                    
                    <tr>
                      <td class="dashLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td align="center">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
											  <tr>
											     <td>
										       	<div id="reportListData" class="pageDiv">
															<%@ include file="/WEB-INF/jsp/report/storeVisitingTrack/reportListDataExecutorDetailsCityMap.jsp" %>
										       	</div>
											     </td>
											   </tr>
                        </table><p/>
                      </td>
                      <td class="dashRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                    <tr>
                      <td class="dashBottomLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashBottom" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashBottomRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<script type="text/javascript">
// 	<c:if test="${!empty standardAdminDivAreaCode}">
// 		<c:if test="${adminDivLevelDeep == 6}">
// 			listDefaultPageAjax('reportListData','reportForm','<c:url value="/report/storeOpeningRate/reportListData/6/${standardAdminDivAreaCode}.html" />');
// 		</c:if>
// 		<c:if test="${adminDivLevelDeep == 1}">
// 		listDefaultPageAjax('reportListData','reportForm','<c:url value="/report/storeOpeningRate/reportListData/1/${standardAdminDivAreaCode}.html" />');
// 		</c:if>
// 	</c:if>	
	
	function searchExecutor(){
		var searchStartTime=$("#searchStartTime").val();
		var searchEndTime=searchStartTime+" 23:59:59";
		searchStartTime+=" 00:00:00";
		
		window.location="<c:url value="/report/storeVisitingTrack/reportList/3/${executorEmpId}/${standardAdminDivAreaCode}.html" />"+"?searchStartTime="+searchStartTime+"&searchEndTime="+searchEndTime;
	}

</script>

	<script type="text/javascript">
		$(document).ready(function() {
	
		var map = new BMap.Map("mapContainer");
		
// 		var map1 = new BMap.Map("mapContainer1");
		
		var cityOrProvinceAdName = "${standardAdminDivAreaName}";
		var mapZoomLevel = "${mapZoomLevel}";
		
		//初始化地图,设置中心点坐标和地图级别，13是一个相对合适的用于城区级别展示的ZOOM等级
		//初始化地图,设置中心点坐标和地图级别，8是一个相对合适的用于省市级别展示的ZOOM等级
		map.centerAndZoom(cityOrProvinceAdName, mapZoomLevel);
// 		map1.centerAndZoom(cityOrProvinceAdName, mapZoomLevel);
		
		//启用鼠标滚轮控制地图Zoom		
		map.enableScrollWheelZoom();
		
		//启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图
		map.enableKeyboard();
// 		map1.enableKeyboard();
		
		//启用部分地图辅助控件
		map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//BMAP_HYBRID_MAP 卫星图
		map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
		var opts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT  , offset: new BMap.Size(10, 400)};
		map.addControl(new BMap.NavigationControl(opts));//添加鱼骨控件
		
		//启用部分地图辅助控件
// 		map1.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//BMAP_HYBRID_MAP 卫星图
// 		map1.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
// 		var opts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT  , offset: new BMap.Size(10, 90)};
// 		map1.addControl(new BMap.NavigationControl(opts));//添加鱼骨控件
		
		//创建地址解析器实例  
		var myGeo = new BMap.Geocoder();
		
		var plannedPath = new Array();
		var actualPath = new Array();
		
		var storeRefGpses = document.getElementsByName("storeRefGps");
		
		var taskDoneMarkerImg = "<c:url value='/images/marker-storeopened.png' />";
		var taskDoneIcon = new BMap.Icon(taskDoneMarkerImg, new BMap.Size(20, 30));
		
		var savedLegalActualPoint;
		
		<c:if test="${adminDivLevelDeep == 3}">
			<c:forEach var="detail" items="${executorDetails}" varStatus="status">
				renderActualDetail("${detail.empName}","${detail.projEmpTitle}","${detail.jobStartedLongitude}","${detail.jobStartedLatitude}","${detail.storeChannelName}","${detail.storeChannelAdName}", "${detail.storeChannelCityAdName}", "${detail.projectName}", "${detail.planJobStartTime}", "${status.index}");
			</c:forEach>
			
			<c:forEach var="detail" items="${executorDetails}" varStatus="status">
				renderPlannedDetail("${detail.storeChannelName}", "${detail.storeChannelAddress}", "${detail.empName}","${detail.projEmpTitle}","${detail.jobName}", "${detail.storeChannelAdName}", "${detail.storeChannelCityAdName}", "${detail.projectName}", "${detail.planJobStartTime}", "${status.index}");
			</c:forEach>
		</c:if>
		
		function renderPlannedDetail(storeName, storeAddress, executorName, executorTitle, jobName, storeAdName, storeCityAdName, projectName, planStartTime, recordIndex) {

			//将地址解析结果显示在地图上，并调整地图视野
			//不合法的地址将无法显示在地图上
			myGeo.getPoint(storeAddress, function(point) {
				if (point) {
					var marker = new BMap.Marker(point);
					marker.disableMassClear();//设置标记不允许被删除
					
					var currentPoint = new BMap.Point(point.lng, point.lat);
					plannedPath[recordIndex] = currentPoint;
 					
 					//异步填充门店参考GPS
 					storeRefGpses[recordIndex].innerHTML = point.lng + "," + point.lat;
					
					var polyline = new BMap.Polyline(plannedPath, 
							{strokeColor:"red", strokeWeight:3, strokeOpacity:0.5});

 					//map.clearOverlays();
					
					//相同地址的位置标记可能会被遮盖,因此简单地启用拖动,TODO:jay 自动留出offset...
					marker.enableDragging();
					
					var label = new BMap.Label((parseInt(recordIndex)+1),{offset:new BMap.Size(20,-10)});
					marker.setLabel(label);
					var opts = {
					  title : "执行人: "+executorName+"("+executorTitle+")<br/>计划执行时间: "+ planStartTime  // 信息窗口标题
					}			  
					var content = "门店: "+ storeName + "<br/>地址: "+storeAddress + "["+storeAdName+"/"+storeCityAdName+"]" + "<br/>项目: "+projectName;
					var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
					marker.addEventListener("click", function() {
						this.openInfoWindow(infoWindow);  
					});
					map.addOverlay(marker);
					
					map.addOverlay(polyline);
				}
			}, cityOrProvinceAdName);
		}
		
		function renderActualDetail(executorName, executorTitle, longitude, latitude, storeName,storeAdName, storeCityAdName, projectName, actualTime, recordIndex) {
			var point = new BMap.Point(parseFloat(longitude), parseFloat(latitude));
			var marker = new BMap.Marker(point, {icon: taskDoneIcon});
			
			marker.disableMassClear();//设置本类标记不允许被删除
			
 			//相同地址的位置标记可能会被遮盖,因此简单地启用拖动,TODO:jay 自动留出offset...
 			marker.enableDragging();
			
			var label = new BMap.Label((parseInt(recordIndex)+1),{offset:new BMap.Size(20,-10)});
			marker.setLabel(label);
			
			var opts = {
			  title : "执行人: "+executorName+"("+executorTitle+")<br/>实际执行时间: "+ actualTime  // 信息窗口标题
			}			
			//map1.addOverlay(marker);
			var actualAddress = "";
			myGeo.getLocation(point, function(rs){
			        var addComp = rs.addressComponents;
			        actualAddress = ("["+addComp.province + "/" + addComp.city + "/" + addComp.district + "]" + addComp.street + ", " + addComp.streetNumber);
			});
			marker.addEventListener("click", function() {
				var content = "计划门店: "+ storeName + "<br/>实际位置: "+actualAddress + "<br/>项目: "+projectName;
				var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
				this.openInfoWindow(infoWindow);  
			});

			map.addOverlay(marker);
			
			if (point) {
				//每次都根据合法的经纬度进行线条的重绘->
				if (longitude == "" || latitude == "" || longitude == "null" || latitude == "null") {
					actualPath[recordIndex] = "";
				} else {
					actualPath[recordIndex] = point;
				}
				
				var reActualPath = new Array();
				for(var state in actualPath) {
					if (actualPath[state] != "") {
						reActualPath.push(actualPath[state]);
					}
				}
				
				var polyline = new BMap.Polyline(reActualPath, 
						{strokeColor:"green", strokeWeight:3, strokeOpacity:0.5});
				
				polyline.disableMassClear();//设置本类标记不允许被删除

				map.addOverlay(polyline);
				//<-
			}
		}
		
		
			//var point = new BMap.Point(116.404, 39.915);
			try{
				var executorLocations=${executorLocations};
				var locationPoints=new Array();
				
				for(var m=0;m<executorLocations.length;m++){
					var latitude=executorLocations[m].LATITUDE;
					var longitude=executorLocations[m].LONGITUDE;
					var locationPoint=new BMap.Point(longitude, latitude);
					
					if(m==0){
						var marker = new BMap.Marker(locationPoint);
						var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>起点</p>");
						marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});
						map.addOverlay(marker);
					}else if(m==executorLocations.length-1){
						var marker = new BMap.Marker(locationPoint);
						var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>终点</p>");
						marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});
						map.addOverlay(marker);
					}
					
					locationPoints.push(locationPoint);
				}
				
				var locationsLine = new BMap.Polyline(locationPoints, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
				map.addOverlay(locationsLine);
			}catch(e){
				alert(e);
			}
			

			
			
		
			
		});
		
		
		
		
		
		
	</script>